<!-- Begin of #main -->
<div id="main" role="main">

    <!-- Begin of titlebar/breadcrumbs -->
    <div id="title-bar">
        <ul id="breadcrumbs">
            <li><a href="dashboard.html" title="Home"><span id="bc-home"></span></a></li>
            <li><a href="list_block.html" title="Lists">Lists</a></li>
            <li class="no-hover">Contact List</li>
        </ul>
    </div> <!--! end of #title-bar -->

    <div class="shadow-bottom shadow-titlebar"></div>

    <!-- Begin of #main-content -->
    <div id="main-content">
        <div class="container_12">

            <div class="grid_12">
                <h1>Contact List</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
            </div>

            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Contact List</h1><span></span>
                    </div>
                    <div class="block-content">
                        <div id="slider">
                            <div class="slider-content">
                                <ul>
                                    <li id="a"><a name="a" class="title">A</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Adam</a></li>
                                            <li><a href="javascript:void(0);">Alex</a></li>
                                            <li><a href="javascript:void(0);">Ali</a></li>
                                            <li><a href="javascript:void(0);">Apple</a></li>
                                            <li><a href="javascript:void(0);">Arthur</a></li>
                                            <li><a href="javascript:void(0);">Ashley</a></li>
                                        </ul>
                                    </li>
                                    <li id="b"><a name="b" class="title">B</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="c"><a name="c" class="title">c</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="d"><a name="d" class="title">d</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="e"><a name="e" class="title">E</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="f"><a name="f" class="title">f</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="g"><a name="g" class="title">g</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="h"><a name="h" class="title">h</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="i"><a name="i" class="title">i</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="j"><a name="j" class="title">j</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="k"><a name="k" class="title">k</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="l"><a name="l" class="title">l</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="m"><a name="m" class="title">m</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="n"><a name="n" class="title">n</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="o"><a name="o" class="title">o</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="p"><a name="p" class="title">p</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="q"><a name="q" class="title">q</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="r"><a name="r" class="title">r</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="s"><a name="s" class="title">s</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="t"><a name="t" class="title">t</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="u"><a name="u" class="title">u</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="v"><a name="v" class="title">v</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Barry</a></li>
                                            <li><a href="javascript:void(0);">Becky</a></li>
                                            <li><a href="javascript:void(0);">Biff</a></li>
                                            <li><a href="javascript:void(0);">Billy</a></li>
                                            <li><a href="javascript:void(0);">Bozarking</a></li>
                                            <li><a href="javascript:void(0);">Bryan</a></li>
                                        </ul>
                                    </li>
                                    <li id="w"><a name="w" class="title">w</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">Calista</a></li>
                                            <li><a href="javascript:void(0);">Cathy</a></li>
                                            <li><a href="javascript:void(0);">Chris</a></li>
                                            <li><a href="javascript:void(0);">Cinderella</a></li>
                                            <li><a href="javascript:void(0);">Corky</a></li>
                                            <li><a href="javascript:void(0);">Cypher</a></li>
                                        </ul>
                                    </li>
                                    <li id="x"><a name="x" class="title">x</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="y"><a name="y" class="title">y</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                    <li id="z"><a name="z" class="title">z</a>
                                        <ul>
                                            <li><a href="javascript:void(0);">damien</a></li>
                                            <li><a href="javascript:void(0);">danny</a></li>
                                            <li><a href="javascript:void(0);">denver</a></li>
                                            <li><a href="javascript:void(0);">devon</a></li>
                                            <li><a href="javascript:void(0);">doug</a></li>
                                            <li><a href="javascript:void(0);">dustin</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Note</h1><span></span>
                    </div>
                    <div class="block-content">
                        <p>This is a very impressive method for displaying a lot of data.</p>
                        <p>You are not limited, to use the initial letters. Instead of using the letters, you can use complete words or anything else.</p>
                    </div>
                </div>
            </div>

            <div class="clear height-fix"></div>

        </div></div> <!--! end of #main-content -->
</div> <!--! end of #main -->





<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script> <!-- lightweight wrapper for consolelog, optional -->
<script defer src="js/mylibs/jquery-ui-1.8.15.custom.min.js"></script> <!-- jQuery UI -->
<script defer src="js/mylibs/jquery.notifications.js"></script> <!-- Notifications  -->
<script defer src="js/mylibs/jquery.uniform.min.js"></script> <!-- Uniform (Look & Feel from forms) -->
<script defer src="js/mylibs/jquery.validate.min.js"></script> <!-- Validation from forms -->
<script defer src="js/mylibs/jquery.dataTables.min.js"></script> <!-- Tables -->
<script defer src="js/mylibs/jquery.tipsy.js"></script> <!-- Tooltips -->
<script defer src="js/mylibs/excanvas.js"></script> <!-- Charts -->
<script defer src="js/mylibs/jquery.visualize.js"></script> <!-- Charts -->
<script defer src="js/mylibs/jquery.slidernav.min.js"></script> <!-- Contact List -->
<script defer src="js/common.js"></script> <!-- Generic functions -->
<script defer src="js/script.js"></script> <!-- Generic scripts -->

<script type="text/javascript">
    $().ready(function() {

        /*
        * Form Validation
        */
        $.validator.setDefaults({
            submitHandler: function(e) {
                $.jGrowl("Form was successfully submitted.", { theme: 'success' });
                $(e).parent().parent().fadeOut();
                v.resetForm();
                v2.resetForm();
                v3.resetForm();
            }
        });
        var v = $("#create-user-form").validate();
        jQuery("#reset").click(function() { v.resetForm(); $.jGrowl("User was not created!", { theme: 'error' }); });

        var v2 = $("#write-message-form").validate();
        jQuery("#reset2").click(function() { v2.resetForm(); $.jGrowl("Message was not sent.", { theme: 'error' }); });

        var v3 = $("#create-folder-form").validate();
        jQuery("#reset3").click(function() { v3.resetForm(); $.jGrowl("Folder was not created!", { theme: 'error' }); });

        /*
        * Contact List
        */
        $('#slider').sliderNav();

    });
  </script>
  <!-- end scripts-->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->